<script>
    $(function() {

        $('head').append('<link rel="stylesheet" href="<?php echo $this->Html->url('/js/jquery-ui/development-bundle/ui/minified/jquery.ui.core.min.js',true);?>" type="text/css" />');
        $.getScript("<?php echo $this->Html->url('/js/jquery-ui/development-bundle/ui/minified/jquery.ui.core.min.js',true);?>", function(data, textStatus, jqxhr) {
            $.getScript("<?php echo $this->Html->url('/js/jquery-ui/development-bundle/ui/minified/jquery.ui.widget.min.js',true);?>", function(data, textStatus, jqxhr) {
                $.getScript("<?php echo $this->Html->url('/js/jquery-ui/development-bundle/ui/minified/jquery.ui.mouse.min.js',true);?>", function(data, textStatus, jqxhr) {
                    $.getScript("<?php echo $this->Html->url('/js/jquery-ui/development-bundle/ui/minified/jquery.ui.sortable.min.js',true);?>", function(data, textStatus, jqxhr) {

                    });
                });
            });
        });

        $('.easyui-linkbutton').linkbutton({
            plain: true
        });

        $('body').layout('collapse', 'east');
        setTimeout(function() {
            $('body').layout('collapse', 'south');
        }, 500);
    });
    function toggleModule(comoName) {
        $('#' + comoName).linkbutton({
            plain: true,
            iconCls: 'icon-loading'
        });
        $.ajax({
            url: 'toggleModule/' + comoName,
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            success: function(result) {
                if (result === 'a') {
                    $('#' + comoName).linkbutton({
                        plain: true,
                        iconCls: 'icon-tick'
                    });
                } else if (result === 'i') {
                    $('#' + comoName).linkbutton({
                        plain: true,
                        iconCls: 'icon-slash'
                    });
                }
            }
        });
    }

</script>
<style type="text/css">

    #modulesList {
        width: 100%;
        padding: 0;
        margin: 0;
        font: 11px Verdana, sans-serif;
    }
    #modulesList ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #modulesList li{
        clear: both;
        margin: 0;
        display: block;
        padding: 5px 35px 5px 0.5em;
        font-weight:bold;
        border-left: 10px solid #99bbe8;
        background-color: #F1F1f1;
        color: #15428b;
        text-decoration: none;
        border-bottom: 1px solid #99bbe8;
        background-image: none;
        height: 25px;
    }

    #modulesList li:hover {
        border-left: 10px solid #e0ecff;
        background-color: #FFF;
        color: #15428b;
    }
    /* Fix IE. Hide from IE Mac \*/
    * html ul#modulesList  li { float: left; height: 1%; }
    * html ul#modulesList  li a { height: 1%; }
    /* End */

    #modulesList .tools{
        vertical-align: central;
    }
    #modulesList .tools a{
        margin-right: 10px;
    }
</style>
<div id="modulesList">
    <ul>
        <?php
            foreach ($listModules as $key => $value) {
                if(in_array($value, $listModulesDb)){
                    $coreModule = new CoreModulesController();
                    $module = $coreModule->getModuleFromName($value);
                    if(!empty($module["CoreModule"]["como_status"]) && $module["CoreModule"]["como_status"] === 'a'){
                        $icon = "icon-tick";
                    }else{
                        $icon = "icon-slash";
                    }
                }else{
                    $icon = "icon-slash";
                }
                echo "
                    <li>
                        <div class=\"tools icon-{$this->Html->getModuleIcon($value)}\" style='padding-left:20px;background-position:left center;'>
                            <a href=\"#\" class=\"easyui-linkbutton\" data-options=\"iconCls:'{$icon}'\" id=\"{$value}\" onclick=\"toggleModule('{$value}');\"></a>
                            {$value}
                        </div>
                    </li>";
            }
        ?>
    </ul>
</div>